<template>
 <view class="login d_f f_d_c a_i_c">
  <view class="header d_f j_c_s_b a_i_c">
	  <image src="../../static/ct_0031_返回键.png" mode="" class="back" @tap="back"></image>
	  <view></view>
	  
  </view>
   <image src="../../static/ct_0045_logo大.png" mode="" class="logo"></image>
   <view class="welcome">Welcome back</view>
   <view class="title">Email address</view>
   <view class="input">
	   	<u-input v-model="form.email"  :border="false" placeholder="" />
   </view>
    <view class="title">Passwrod</view>
	 <view class="input">
		 <u-input v-model="form.password" type="password"  :border="false" placeholder="" />
	 </view>
	 <view class="button d_f j_c_c a_i_c" @tap="login">Continue</view>
	 <view class="tips d_f j_c_c a_i_c">Don't have an account <text class="sign" @tap="sign">Sign up</text></view>
 </view>
</template>

<script>
 export default {
   data () {
     return {
       form:{
		   email:'',
		   password:'',
	   }
     }
   },
   components: {

   },
   methods: {
    back(){
		uni.navigateBack({
			delta: 1
		});
	},
	//提交登录信息
	login(){
	  	if(!this.form.email){
			this.tips('Please enter an email address')
			return
		}if(!this.form.password){
			this.tips('Please input a password')
		}
		 uni.removeStorageSync('data');
		this.$api.userLogin(this.form).then(res=>{
			uni.setStorageSync('data',res.data)
			uni.reLaunch({
				url: '/pages/index/index'
			});
		})
	},
	tips(title){
		uni.showToast({
			title: title,
			icon:'none',
			duration: 3000
		});
	},
	sign(){
		uni.navigateTo({
			url:'/pages/index/registratio'
		})
	}
   },
   onShow() {
   	uni.removeStorageSync('data')
   },
   onLoad(options) {

   },
   watch: {

   },
   computed: {

   }
 }
</script>

<style scoped lang='scss'>
.login{
	width: 100%;
	height: 100%;
	background-image: url('../../static/ct_0011_背景.png');
	background-size: 100% 100%;
	.header{
		width: calc(100% - 64rpx);
		height: 160rpx;
		margin-left: 32rpx;
		
		.back{
			width: 20rpx;
			height: 32rpx;
			transform: rotate(180deg);
		}
	}
	.logo{
		width: 448rpx;
		height: 120rpx;
	}
	.welcome{
		margin-top: 150rpx;
		color: #fff;
		font-weight: 700;
		font-size: 50rpx;
	}
	.title{
		color: #fff;
		font-size: 28rpx;
		margin-top: 32rpx;
		width: 600rpx;
	}
	.input{
		width: 686rpx;
		border-radius: 40rpx;
		border: 1rpx solid rgb(65,103,103);
		height: 80rpx;
		margin-top: 32rpx;
		padding: 0rpx 32rpx;
		/deep/.u-input--border{
			border: none !important;
		}
		/deep/.uni-input-input{
			color:  #fff !important;
		}
	}
	.button{
		width: 640rpx;
		border-radius: 40rpx;
		background: #fff;
		color: #3c9469;
		height: 100rpx;
		margin-top: 64rpx;
		font-weight: 700;
	}
	.tips{
		margin-top: 32rpx;
		color: #fff;
		font-weight: 700;
		.sign{
			color: #00ffcc;
			margin-left: 10rpx;
		}
	}
	
}
</style>